<template>
    <div id="app">
        <router-view/>
    </div>
</template>
<script>
export default {
    name: 'App',
    methods: {
        // 刷新界面
        refreshPage() {
            setTimeout(() => {
                window.location.reload();
            }, 800);
        },
    },
    mounted() {
        const that = this;
        window.addEventListener('resize', () => {
            that.refreshPage();
        });
    },
};
</script>

<style lang="scss">
#app {
    width: 100%;
    height: 100%;
    background-image: url("./assets/bg.png");
    background-repeat: no-repeat;
    background-color: #071034;
    background-size: 100% 100%;

    .main-con {
        /**表格左右上边框 */
        .el-table--border,
        .el-table--border .el-table__cell,
        .el-table__body-wrapper
            .el-table--border.is-scrolling-left
            ~ .el-table__fixed {
            border-color: #0175d6;
        }

        .el-table--border::after,
        .el-table--group::after,
        .el-table::before,
        .el-table__fixed-right::before,
        .el-table__fixed::before {
            background: #0175d6;
        }

        /**表格主题内容背景色 */
        .el-table th.el-table__cell,
        .el-table tr {
            background: transparent;
        }

        .el-table tr {
            &:nth-child(even) {
                background: rgba(1, 18, 45, 0.4);
            }
        }

        .el-table thead {
            color: #72c0ff;
        }

        .el-table,
        .el-table__expanded-cell {
            background: rgba(1, 18, 45, 0.1);
        }

        /* .el-table__fixed-body-wrapper {
            top: 48px !important;
        } */

        .el-table--enable-row-hover
            .el-table__body
            tr:hover
            > td.el-table__cell,
        .el-table__body-wrapper tr:hover > td.el-table__cell,
        .el-table__body .el-table__row.hover-row td {
            background: rgba(1, 18, 45, 0.4) !important;
        }

        .el-table {
            color: #fff;
            font-size: 16px;
        }

        .vue-treeselect__control,
        .vue-treeselect__placeholder,
        .vue-treeselect__single-value {
            height: 38px;
            line-height: 38px;
            box-sizing: border-box;
            font-size: 16px;
        }

        .vue-treeselect__control {
            border-radius: 4px;
        }

        .vue-treeselect__placeholder {
            color: #606266;
        }

        .el-select,
        .el-date-editor,
        .el-range-editor {
            width: 100%;
        }

        .el-date-editor .el-range-input,
        .el-date-editor .el-range-separator,
        .el-date-editor .el-range__icon {
            font-size: 16px;
            color: #fff;
            background: transparent;
        }

        .el-input__inner {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }

        .el-input__inner::placeholder,
        .el-range-input::placeholder {
            color: #606266;
        }

        .el-pagination {
            .el-input__inner {
                height: 28px;
                line-height: 28px;
                font-size: 14px;
            }
        }

        .el-pagination__total {
            color: #cdcfd5;
        }

        // 按钮样式调整
        .sp-text-btn {
            padding-left:12px;
            padding-right:12px;
            span {
                font-size: 14px;
                color: #72c0ff;
            }
            .el-icon-search:before,
            .el-icon-plus:before {
                font-size: 16px;
                color: #72c0ff;
            }

            &:hover {
                background: rgba(72, 163, 255, 0.4);
            }
        }

        // 头部搜索条件样式 rgba(255, 255, 255, 0.39)
        // bg #192B74
        .top-filter {
            .el-input__inner {
                background: rgba(73, 192, 255, 0.07);
                border-color: #0175d6;
                color: #fff;
            }
            input::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.39);
            }
            input::-moz-input-placeholder {
                color: rgba(255, 255, 255, 0.39);
            }
            input::-ms-input-placeholder {
                color: rgba(255, 255, 255, 0.39);
            }

            .vue-treeselect__control {
                background: rgba(73, 192, 255, 0.07);
                border-color: #0175d6;
            }

            .vue-treeselect__placeholder {
                color: rgba(255, 255, 255, 0.39);
            }

            .vue-treeselect__single-value {
                color: #fff;
            }

        }

        .vue-treeselect__menu {
            background: #192B74!important;
            border-color: #192B74!important;
        }

        .vue-treeselect__label {
            font-size: 14px!important;
            color: #fff!important;
        }

        .vue-treeselect--single .vue-treeselect__option--selected,
        .vue-treeselect__option--highlight {
            background: rgb(34, 66, 250)!important;
        }
    }
}
.el-select-dropdown__item {
    font-size: 14px !important;
    height: 40px !important;
    line-height: 40px!important;
    color: #fff!important;
}
// .el-picker-panel
.el-select-dropdown {
    background: #192B74!important;
    border-color: #192B74!important;
}
.el-popper[x-placement^=bottom] .popper__arrow::after,
.el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: #192B74!important;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: rgb(34, 66, 250)!important;
}
/* .el-picker-panel {
    color: #fff;
}
.el-date-picker__header-label {
    color: #fff!important;
}

.el-month-table td .cell {
    color: #fff!important;
} */

/* .el-month-table td.current:not(.disabled) .cell {
    background: rgb(34, 66, 250)!important;
} */

/* .el-picker-panel__icon-btn {
    color: #fff!important;
} */

</style>
